<template>
  <Menu :isSearch="false"></Menu>
  <div class="message-container">
    <div class="message-left">
      <div class="left-title">
        <n-icon size="15" :component="PaperPlane" />
        <div style="font-size: 14px;font-weight: 700;margin-left: 10px;">消息中心</div>
      </div>
      <ul class="left-ul">
        <li v-for="item in leftMenuData" :key="item.path" class="left-li"><a :href="item.path" class="left-item"
            :class="router.currentRoute.value.name == item.routerName ? 'active-item' : ''">{{
              item.name }}</a><span class="message-tip" v-if="item.unread">{{ item.unread }}</span></li>
      </ul>
      <n-divider style="background-color: rgb(85, 85, 85);" />
    </div>
    <div class="message-right">
      <div class="right-content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import Menu from "../../components/Menu.vue"
import { PaperPlane } from '@vicons/ionicons5'
import { ref, onMounted, watch } from "vue"
import {getUnreadMsg} from "../../api/message"
import { useRouter } from "vue-router"
import { useStore } from "../../store"
const store = useStore()
const router = useRouter()

const leftMenuData = ref([
  {
    name: "我的消息",
    path: `#/message/myMessage/0`,
    routerName: "myMessage",
    unread: 0
  },
  // {
  //   name: "回复我的",
  //   path: "#/message/reply",
  //   routerName: "reply",
  //   unread: 0
  // },
  {
    name: "收到的赞",
    path: "#/message/getLike",
    routerName: "getLike",
    unread: 0
  },
])

onMounted(async() => {
  const user_id = Number(localStorage.getItem("user_id"))
  const unread_data = await getUnreadMsg(user_id)
  if(unread_data.code == "200") {
    leftMenuData.value[0] = {...leftMenuData.value[0], unread: unread_data.data.unread_my_msg, path: `#/message/myMessage/${unread_data.data.default_user_id}`}
  }else{
    window.$message.error(unread_data.message)
  }
})

watch(() => store.unReadMsg, async(newValue) => {
  leftMenuData.value[0].unread = newValue
})

</script>

<style lang='scss' scoped>
.message-container {
  width: 980px;
  height: 100vh;
  padding-top: 50px;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;

  .message-left {
    width: 140px;
    height: 100%;
    background-color: var(--bs-message-left);

    .left-title {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 70px;
    }

    .left-ul {
      margin: 0;
      padding-left: 20px;

      .left-li {
        height: 40px;
        cursor: pointer;
        display: flex;
        align-items: center;

        .left-item {
          color: var(--bs-text-color);
          text-decoration: none;
          margin-right: 10px;
        }

        .left-item:hover {
          color: #63e2b7;
        }

        .left-item::before {
          content: "\25cf";
          padding-right: 10px;
        }

        .active-item {
          color: #63e2b7;
        }

        .message-tip {
          background-color: #f8487a;
          line-height: 16px;
          height: 16px;
          font-size: 12px;
          border-radius: 10px;
          width: 28px;
          text-align: center;
        }
      }
    }
  }

  .message-right {
    width: 840px;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;

    .right-content {
      width: 100%;
      height: 100%;
    }
  }
}</style>